<template>
  <div class="openclass-live">
    <div class="live-content">
      <div class="live-banner-bgc">
        <div class="class-live-banner maxW">
          <div class="live-banner-tit">
            <i
              class="el-icon-arrow-left"
              @click="goback()"
            ></i>
            <strong :title="courseData.name">{{ courseData.name }}</strong>
          </div>
          <div class="live-banner-r">
            <span class="collect_btns">
              <i v-text="!fav_flag ? '未收藏' : '已收藏'"></i>
              <i
                :class="[
                  !fav_flag
                    ? 'collect_btn un_collect'
                    : 'collect_btn alr_collect',
                ]"
                @click="addCollection()"
              ></i>
            </span>
            <i class="f-line">|</i>
            <share
              class="box"
              :wapPath="wapPath"
            ></share>
          </div>
        </div>
        <div class="video-play-cont maxW">
          <!-- 播放器相关的功能 -->
          <div
            class="video-box"
            id="videobox"
          >
            <!-- <player v-if="videoFlag" :videoOptions="courseData"></player> -->
            <!-- <AliPlayer v-if="videoFlag" :options="courseData" /> -->
            <DPlayer
              v-if="videoFlag"
              :options="courseData"
              :pointData="pointData"
            ></DPlayer>
          </div>
          <!-- 右边工具栏 -->
          <rightBar
            @switchSrc="switchSrc"
            :showDownLoad="showDownLoad"
            :cutid="cutid"
            :videoData="courseData"
            :videoid="+videoid"
          ></rightBar>
        </div>
      </div>
      <div class="live-commont maxW clear">
        <div class="live-commont-l fl">
          <template>
            <el-tabs v-model="activeName1">
              <el-tab-pane
                label="课程介绍"
                name="first"
              >
                <div class="i_reviewArea_i clear">
                  <span>
                    <i class="ipng Collection07"></i>
                    <em id="video_favs">{{ courseData.favs }}收藏</em>
                  </span>
                  <span>
                    <i class="ipng video01"></i>
                    <em id="video_clicks">{{ courseData.clicks }}播放</em>
                  </span>
                  <span>
                    <i class="ipng comment01"></i>
                    <em id="video_comments">{{ commentsCount }}评论</em>
                  </span>
                  <span>
                    <i class="ipng download01"></i>
                    <em id="video_downloads">{{ courseData.downloads }}下载</em>
                  </span>
                </div>
                <ul>
                  <li class="review-list">
                    <span class="title">课程分类</span>
                    <div class="video_category">
                      <span v-html="
                          courseData.category ? courseData.category : '暂无分类'
                        "></span>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">关键字</span>
                    <div class="video_keyword">
                      <template v-if="courseData.keywords != null">
                        <el-tag
                          size="small"
                          v-for="item in courseData.keywords"
                          :key="item.id"
                          style="margin: 2px"
                        >{{ item }}</el-tag>
                      </template>
                      <span v-else>暂无关键字</span>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">视频简介</span>
                    <div class="video_profile">
                      <span v-html="
                          courseData.profile ? courseData.profile : '暂无简介'
                        "></span>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">课程须知</span>
                    <div class="video_notice">
                      <span v-html="
                          courseData.notice ? courseData.notice : '暂无须知'
                        "></span>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">保存时间</span>
                    <div class="video_notice">
                      <span v-html="
                          courseData.save_month_txt
                            ? courseData.save_month_txt
                            : '暂无时间'
                        "></span>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane
                label="讲师介绍"
                name="second"
              >
                <ul>
                  <li class="review-list">
                    <span class="title">老师信息</span>
                    <div class="user_info">
                      <div class="i_teacherHs clear">
                        <router-link
                          class="ipng head fl"
                          :to="{
                            path: '/teach/space',
                            query: {
                              id: courseData.userid,
                            },
                          }"
                        >
                          <img :src="BASE_URL + courseData.avatar_path" />
                        </router-link>
                        <div class="fl">
                          <span>{{ courseData.user_name }}</span>
                          <span>
                            {{ courseData.teacher_org_name }}
                            <i v-if="
                                courseData.teacher_org_name != '' &&
                                courseData.teacher_sub_name != ''
                              ">-</i>
                            {{ courseData.teacher_sub_name }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">老师简介</span>
                    <div class="user_profile">
                      <p>{{ courseData.user_profile }}</p>
                      <p v-if="courseData.user_profile == ''">暂无简介</p>
                    </div>
                  </li>
                  <li class="review-list">
                    <span class="title">其他课程</span>
                    <div class="teacher_video">
                      <template v-for="item in otherVideoData">
                        <el-tag
                          type="info"
                          :key="item.id"
                          style="margin: 2px"
                        >{{ item.video_name }}</el-tag>
                        <!-- <router-link v-if="item.authority=='1'" :key="index" :to="{
                                                        path: 'openclassDetail',
                                                        query: { id: item.id }
                                                    }" target="_blank">
                                                   
                                                </router-link> -->
                      </template>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane
                label="评分评论"
                name="third"
              >
                <div
                  class="discuss-area clear"
                  v-if="!comment_flag"
                >
                  <div class="block">
                    <span class="stration">给该课程评分：</span>
                    <el-rate
                      :allow-half="true"
                      v-model="classSore"
                    ></el-rate>
                  </div>
                  <div class="textarea">
                    <el-input
                      type="textarea"
                      :rows="5"
                      resize="none"
                      v-model="profile"
                      maxlength="140"
                      placeholder="快来点评一下吧，大胆想说出你的想法~"
                    ></el-input>
                    <span class="numberWord">
                      <i>{{ profile.length }}</i>
                      /140
                    </span>
                  </div>
                  <el-button
                    class="fr"
                    size="small"
                    type="primary"
                    @click="addComent"
                  >确定</el-button>
                </div>
                <div class="commont-list clear">
                  <div class="commont-list-top">
                    <span>评论</span>
                    <el-button
                      type="text"
                      @click="sortingData()"
                    >
                      时间
                      <i :class="[
                          sortFlag
                            ? 'el-icon-sort-down sortGery'
                            : 'el-icon-sort-down',
                        ]"></i>
                      <i :class="[
                          sortFlag
                            ? 'el-icon-sort-up'
                            : 'el-icon-sort-up sortGery',
                        ]"></i>
                    </el-button>
                  </div>
                  <ul>
                    <li
                      class="comment-ls"
                      v-for="(item, index) of commentListData"
                      :key="index"
                    >
                      <div class="comment-ls-content clear">
                        <a
                          class="reviewer_img fl"
                          href="javascript:;"
                        ><img
                            class
                            :src="BASE_URL + item.avatar_path"
                          /></a>
                        <div class="reviewer-info">
                          <div class="i_videoReview_ip clear">
                            <div class="reviewer fl">
                              <a href="javascript:;">{{ item.username }}</a>
                              <el-rate
                                :allow-half="true"
                                disabled
                                :value="item.score / 2"
                              ></el-rate>
                            </div>
                            <div class="create-time fr">
                              <i
                                v-if="item.userid == user_login_id"
                                class="ipng but_edit01 i_editBt edit_comment"
                                title="编辑"
                                @click="editComent(item)"
                              ></i>
                              <i
                                v-if="item.userid == user_login_id"
                                class="ipng but_del i_editDl del_comment"
                                title="删除"
                                @click="delComent(item.id)"
                              ></i>
                              <span>{{ item.create_time }}</span>
                            </div>
                          </div>
                          <div class="review-text clear">
                            <p>{{ item.content }}</p>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="pageBox">
                    <el-pagination
                      v-if="total_number > page_size"
                      @current-change="change_page(page_index, '0')"
                      :page-size="page_size"
                      :current-page.sync="page_index"
                      layout="total,prev, pager, next,jumper"
                      :total="total_number"
                    ></el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 视频区域的 S-T分析 与 教学行为分析 无关联 -->
              <el-tab-pane
                label="S-T统计"
                class="fourTabpane"
                v-if="liveid && isSTconfig == 1"
                name="four"
              >
                <h2>讲台区域跟踪数据</h2>
                <PieChart
                  id="pushPireid"
                  v-if="pushPireFlag"
                  style="width: 820px; height: 400px"
                  :chartData.sync="pireList"
                ></PieChart>
                <ZhuChart
                  id="pushZhuid"
                  v-if="pushPireFlag"
                  style="width: 820px; height: 400px"
                  :chartData.sync="zhuList"
                ></ZhuChart>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div class="live-commont-r fr">
          <div class="i_reviewArea_pd">
            <div class="i_dataDownload_t"><span>资料下载</span></div>
            <div class="i_dataDownload_c">
              <template v-if="videoFileData.length === 0">
                <div class="dataFileBG">
                  <i class="ipng couse01"></i>
                  <span>还没有发现任何资料</span>
                </div>
              </template>
              <template v-else>
                <ul id="video_file">
                  <li
                    class="dataFile clear"
                    v-for="(item, index) of videoFileData"
                    :key="index"
                  >
                    <span :title="`${item.name}.${item.postfix}`">{{ item.name }}.{{ item.postfix }}</span>
                    <i
                      class="ipng but_doland02_slide"
                      @click="down(item)"
                    ></i>
                  </li>
                </ul>
                <div class="pageBox">
                  <el-pagination
                    small
                    background
                    v-if="total_number1 > page_size1"
                    @current-change="change_page(page_index1, '1')"
                    :page-size="page_size1"
                    :current-page.sync="page_index1"
                    layout="prev, pager, next"
                    :total="total_number1"
                  ></el-pagination>
                </div>
              </template>
            </div>
          </div>
          <div class="i_reviewArea_pd">
            <div class="i_dataDownload_t"><span>观看过的人</span></div>
            <div class="look-people">
              <div
                class="dataUser clear"
                id="video_record"
              >
                <el-popover
                  placement="top"
                  width="290"
                  trigger="hover"
                  v-for="(item, index) of sawPeopleData"
                  :key="index"
                >
                  <div class="i_userIn">
                    <div class="i_userIn_txt clear">
                      <a
                        class="fl"
                        href="javascript:;"
                      ><img
                          class="avatar-pic"
                          :src="BASE_URL + item.avatar_path"
                        /></a>
                      <div class="saw-people-info">
                        <span>{{ item.username }}</span>
                        <span v-if="item['message'][0].org_name != null">{{
                          item["message"][0].org_name
                        }}</span>
                        <span v-if="
                            item['message'][0].position_name != null &&
                            item['message'][0].position_name != ''
                          ">
                          {{ item["message"][0].position_name }}
                        </span>
                        <span v-if="
                            item['message'][0].school_name != null &&
                            item['message'][0].school_name != '' &&
                            item['message'][0].rog_name != null &&
                            item['message'][0].rog_name != ''
                          ">
                          {{ item["message"][0].school_name }}/{{
                            item["message"][0].rog_name
                          }}
                        </span>
                      </div>
                    </div>
                    <div class="i_userIn_icon">
                      <!-- <router-link :to="{path: '/space', query: { id: item.create_id}}" target="_blank" rel="noopener noreferrer">
                                                <i class="ipng but_maino1_up"></i>
                                            </router-link> -->
                      <i
                        class="ipng but_maino1_up"
                        @click="gotoUserInfo(item)"
                      ></i>
                      <i
                        v-if="item['message'][0].is_relation == 1"
                        class="ipng but_Collection02"
                        @click="focus_or_not(item['message'][0])"
                      ></i>
                      <i
                        v-else
                        class="ipng but_Collection02_up"
                        @click="focus_or_not(item['message'][0])"
                      ></i>
                    </div>
                  </div>
                  <el-button
                    class="saw-btn"
                    type="text"
                    slot="reference"
                  >
                    <a href="javascript:;"><img
                        class="r-avatar-img"
                        :src="BASE_URL + item.avatar_path"
                      /></a>
                  </el-button>
                </el-popover>
              </div>
              <div
                class="dataFileBG2"
                v-if="sawPeopleData.length == 0"
              >
                <i class="ipng couse02"></i>
                <p>还没有人来学习过哟～</p>
              </div>
              <div class="pageBox">
                <el-pagination
                  small
                  background
                  v-if="total_number2 > page_size2"
                  @current-change="change_page(page_index2, '2')"
                  :page-size="page_size2"
                  :current-page.sync="page_index2"
                  layout="prev, pager, next"
                  :total="total_number2"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import share from "../../common/share";
import rightBar from "./openclassPlayer/openclass-sidebar";
// import player from "./openclassPlayer/openclass-player";
import PieChart from "./openclassPlayer/pieChart";
import ZhuChart from "./openclassPlayer/zhuChart";
import AliPlayer from "../../common/aliplayer";
import DPlayer from "../../common/DPlayer";
const zhuListObj = {
  timeTitle: "跟踪数据统计",
  xList: [],
  yList: [],
};

export default {
  components: {
    share,
    rightBar,
    // player,
    PieChart,
    ZhuChart,
    AliPlayer,
    DPlayer,
  },
  props: {
    userData: {},
  },
  data() {
    return {
      videoid: this.$route.query.id,
      liveid: null,
      isSTconfig: null,
      // 从优课专辑跳到此页面：
      album_id: this.$route.query.album_id,
      cutid: this.$route.query.cutid,
      fav_flag: false,
      pointData: [],
      point_time: [],
      point_text: [],
      activeName1: "first",
      classSore: 0,
      profile: "",
      //课程介绍 / 讲师介绍：
      courseData: {},
      sortFlag: true,
      otherVideoData: [],

      //评论列表:
      commentsCount: 0,
      comment_id: null,
      comment_flag: false,
      page_index: 1,
      page_size: 5,
      total_number: 0,
      order_type: "time_down",
      commentListData: [],
      // 视频资源下载：
      videoFileData: [],
      page_index1: 1,
      page_size1: 3,
      total_number1: 0,
      // 观看过的人：
      sawPeopleData: [],
      page_index2: 1,
      page_size2: 20,
      total_number2: 0,
      showDownLoad: 0,
      videoFlag: false,
      showAlert: false, // 若$alert弹窗显示时值为true，反则为false
      lecturerId: null,
      pireList: [],
      zhuList: Object.assign({}, zhuListObj),
      pushPireFlag: false,
      start_time: null,
    };
  },
  created() {
    this.checkUserLogin();
    this.checkLimit();
    this.getPointMark();
    this.getStartTime();
    this.videoRecord();
  },

  computed: {
    user_login_id() {
      return sessionStorage.getItem('user_info_str') ? JSON.parse(sessionStorage.getItem('user_info_str')).id : ''
    },
    wapPath() {
      const Code = sessionStorage.getItem("CheckSchoolAppCode");
      return `${window.location.origin}/wap/home?path=publicDetails&bdShare=true&id=${this.videoid}&CheckSchoolAppCode=${Code}`;
    },
  },
  watch: {
    // 根据讲师id获取讲师的其他视频
    lecturerId: {
      handler(newVal, oldVal) {
        this.getTeacherVideo(newVal);
      },
      imediate: true,
    },
  },
  mounted() {
    this.getIntroduction(true);
    this.getCommentList();
    this.getVideoFile();
    this.getSawPeople();
    this.isST();
    // 登录且当前视频是非切片视频
    if (this.cutid === undefined) {
      this.recordClickCount();
    }
  },
  methods: {
    switchSrc(video_id, cut_id) {
      this.videoFlag = false;
      this.videoid = video_id;
      this.cutid = cut_id;
      // console.log('接受', video_id,cut_id)
      this.getIntroduction(true);
    },
    getStartTime() {
      var now = new Date();

      var year = now.getFullYear();

      var month = now.getMonth() + 1;

      var day = now.getDate();

      var hour = now.getHours();
      hour = hour < 10 ? "0" + hour : hour;

      var min = now.getMinutes();
      min = min < 10 ? "0" + min : min;

      var sec = now.getSeconds();
      sec = sec < 10 ? "0" + sec : sec;

      var time =
        "" +
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        min +
        ":" +
        sec;

      this.start_time = time;
    },
    videoRecord() {
      let success = (res) => {
        return;
      };
      this.$ajax({
        url: "/appapi/video/video_record",
        method: "post",
        data: {
          video_id: this.videoid, // 视频id
          user_id: this.user_login_id , // 用户id
          start_time: this.start_time, // 进入视频播放页时间
          length: 2, // 按理应该是播放器返回的当前时间，先随便写一个，有问题再补充
        },
        func: { success },
      });
    },
    // 220 直播id
    getTrackInfo() {
      this.zhuList = Object.assign({}, zhuListObj);
      this.zhuList.xList = [];
      this.zhuList.yList = [];
      this.pireList = [];
      this.pushPireFlag = false;
      const success = (res) => {
        let keys = Object.keys(res.data);
        // console.log(res.data,1234567, keys)
        keys.map((i) => {
          if (i.includes("num")) {
            this.zhuList.yList.push(res.data[i]);
            switch (i) {
              case "move_num":
                i = "老师移动";
                break;
              case "switch_num":
                i = "切换PPT";
                break;
              case "step_down_num":
                i = "下讲台";
                break;
              case "write_black_num":
                i = "板书";
                break;
              case "stand_up_num":
                i = "学生起立";
                break;
              default:
                break;
            }

            this.zhuList.xList.push(i);
          }
          if (i.includes("time")) {
            let x =
              Number(res.data[i].split(":")[0]) * 3600 +
              Number(res.data[i].split(":")[1]) * 60 +
              Number(res.data[i].split(":")[2]);
            switch (i) {
              case "move_time":
                i = "走动";
                break;
              case "teach_time":
                i = "讲课";
                break;
              case "step_down_time":
                i = "走下讲台";
                break;
              case "write_black_time":
                i = "板书";
                break;
              case "stand_up_time":
                i = "站立";
                break;
              default:
                break;
            }
            this.pireList.push({ value: x, name: i });
          }
        });
        this.pushPireFlag = true;
      };
      this.$ajax.get("api/video/get_track_info_by_live_id", {
        params: { live_id: this.liveid },
        func: { success },
      });
    },
    isST() {
      let success = (res) => {
        this.isSTconfig = res.data.st_show;
      };

      this.$ajax.get("api/video/video_app_show", {
        params: { type: "1" },
        func: { success },
      });
    },
    //查看当前用户是否被禁止观看
    checkLimit() {
      let self = this;
      let params = {
        type: 1, // (1 视频 2 直播)
        type_id: self.$route.query.id, // （视频或直播id）,
        user_id: self.$store.getters.userInfo.id, // （用户id）
      };
      let success = (res) => {
        if (parseInt(res.data.islimit) != 1) {
          self.$message.error("无法查看该视频，请联系管理员开通观看权限！");
          self.$router.push("/home/openclassList");
        }
      };
      self.$ajax.get("api/video/get_islimit_by_video_user_id", {
        params,
        func: { success },
      });
    },
    // //查看一下用户有没有登录，若没登录，则不给看视频
    checkUserLogin() {
      let success = (res) => {
        if (res.data == "no") {
          this.$message.warning("该视频需要登录才能观看");
          this.$router.push("/home/openclassList");
        }
      };
      let fail = (res) => {};
      this.$ajax({
        url: "api/setting/check_video_live_user",
        method: "get",
        params: {
          type: 0,
        },
        func: {
          success: success,
          fail: fail,
        },
      });
    },

    //课程介绍
    getIntroduction(isSetUrl = false) {
      let success = (data) => {
        if (!data.data.transform_status && this.showAlert) {
          return;
        } else if (!data.data.transform_status && !this.showAlert) {
          this.showAlert = true;
          let content =
            "该视频正在转码中，请在转码成功后点击播放，您可在后台查看视频转码进度。";
          this.$alert(content, "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.back();
              return false;
            },
          });
        }
        if (data.data.status == 0) {
          this.$message.error("视频已被删除！");
          this.$router.push("/openclass/");
        }
        this.fav_flag = data.data.user_isfav;
        this.showDownLoad = data.data.is_download;
        this.lecturerId = data.data.userid;
        this.liveid = data.data.live_id;
        this.liveid && this.getTrackInfo();
        //此处为了下载和收藏视频时，既显示增加的点击数量、下载数，又不重新赋值视频的问题（重新赋值，导致视频重新播放）
        if (isSetUrl) {
          this.courseData = data.data;
          this.$nextTick(() => {
            this.videoFlag = true;
          });
        }
        this.commentsCount = data.data.comments;
        this.comment_flag = Object.keys(data.data.mark_comment).length != 0;
      };
      this.$ajax({
        url: "api/video/video",
        method: "get",
        params: {
          videoid: this.videoid,
          userid: this.user_login_id,
          cutid: this.cutid,
        },
        func: {
          success: success,
        },
      });
    },

    //增加播放次数
    recordClickCount() {
      let success = (data) => {
        this.getIntroduction(true);
      };
      this.$ajax({
        url: "api/video/video_click",
        method: "post",
        data: {
          video_id: this.videoid,
        },
        func: {
          success: success,
        },
      });
    },
    // 点击红心收藏
    addCollection() {
      if (this.user_login_id == 0) {
        this.$message.warning("先登陆个人账号，才能进行此操作哦~");
        return;
      }
      let success = (data) => {
        this.getIntroduction();
        if (this.fav_flag) {
          this.$message.success("已取消收藏");
        } else {
          this.$message.success("收藏成功");
        }
      };
      if (this.fav_flag) {
        this.$ajax({
          url: "api/video/video_favourite",
          method: "delete",
          params: {
            res_id: this.videoid,
            userid: this.user_login_id,
          },
          func: {
            success: success,
          },
        });
      } else {
        this.$ajax({
          url: "api/video/video_favourite",
          method: "post",
          data: {
            res_id: this.videoid,
            userid: this.user_login_id,
          },
          func: {
            success: success,
          },
        });
      }
    },
    //获取讲师介绍：其他课程
    getTeacherVideo(_id) {
      let success = (data) => {
        this.otherVideoData = data.data.data;
      };
      this.$ajax({
        url: "api/video/video_list",
        method: "get",
        params: {
          create_id: _id,
          page_size: 3,
        },
        func: {
          success: success,
        },
      });
    },
    //评分评论：时间按钮
    sortingData() {
      this.sortFlag = !this.sortFlag;
      this.sortFlag == true
        ? (this.order_type = "time_down")
        : (this.order_type = "time_up");
      this.getCommentList();
    },
    //评论列表
    getCommentList() {
      let success = (res) => {
        this.total_number = parseInt(res.data.data_sum);
        this.page_index = parseInt(res.data.page_index);
        this.commentListData = res.data.data;
      };
      this.$ajax({
        url: "api/video/video_comment_list",
        method: "get",
        params: {
          page_index: this.page_index,
          page_size: this.page_size,
          res_id: this.videoid,
          order_type: this.order_type,
        },
        func: {
          success: success,
        },
      });
    },
    // 编辑评论
    editComent(_item) {
      this.comment_flag = false;
      this.comment_id = _item.id;
      this.classSore = _item.score / 2;
      this.profile = _item.content;
    },
    //发表评论
    addComent() {
      if (this.user_login_id == 0) {
        this.$message.warning("先登陆个人账号，才能进行此操作哦~");
        return;
      }
      if (this.profile == "" || this.profile.trim().length == 0) {
        this.$message.warning("请输入评论内容");
        return;
      }
      let _method, _params;
      if (this.comment_id != null) {
        _method = "put";
        _params = {
          id: this.comment_id,
          user_id: this.user_login_id,
          res_id: this.videoid,
          origin: 0,
          score: this.classSore * 2,
          content: this.profile,
        };
      } else {
        _method = "post";
        _params = {
          user_id: this.user_login_id,
          res_id: this.videoid,
          origin: 0,
          score: this.classSore * 2,
          content: this.profile,
        };
      }
      let success = (res) => {
        this.comment_flag = true;
        this.$message.success(res.msg);
        this.getCommentList();
        this.getIntroduction();
      };
      this.$ajax({
        url: "api/comment/comment",
        method: _method,
        data: _params,
        func: {
          success: success,
        },
      });
    },
    // 删除评论
    delComent(_id) {
      this.$confirm("确定要删除此评论吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let success = (res) => {
            this.$message.success("删除成功");
            this.comment_flag = false;
            this.comment_id = null;
            this.classSore = 0;
            this.profile = "";
            this.getCommentList();
            this.getIntroduction();
          };
          this.$ajax({
            url: "api/comment/comment",
            method: "delete",
            params: {
              id: _id,
            },
            func: {
              success: success,
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取视频资源
    getVideoFile() {
      let success = (res) => {
        this.total_number1 = res.data.data_sum;
        this.page_index1 = parseInt(res.data.page_index);
        this.videoFileData = res.data.data;
      };
      this.$ajax({
        url: "api/video/video_file_list",
        method: "get",
        params: {
          authority: 1,
          videoid: this.videoid,
          page_index: this.page_index1,
          page_size: this.page_size1,
        },
        func: {
          success: success,
        },
      });
    },
    // 下载资料
    down(obj) {
      if (this.user_login_id == 0) {
        this.$message.warning("先登陆个人账号，才能进行此操作哦~");
        return;
      }
      window.location.href =
        this.BASE_URL + "/index/openclass/download_video_file?id=" + obj.id;
    },
    //看过的人
    getSawPeople() {
      let success = (res) => {
        this.total_number2 = res.data.data_sum;
        this.sawPeopleData = res.data.data;
      };
      this.$ajax({
        url: "api/video/video_record_user",
        method: "get",
        params: {
          videoid: this.videoid,
          page_index: this.page_index2,
          page_size: this.page_size2,
        },
        func: {
          success: success,
        },
      });
    },
    gotoUserInfo(obj) {
      let host_addr = sessionStorage.getItem("host_addr");
      let host = host_addr.split("://")[1];
      let token = sessionStorage.getItem("redirect_params");
      let url = `${host_addr}${token}&host=${host}&routerUrl=/space&id=${
        obj.create_id
      }&CheckSchoolAppCode=${sessionStorage.getItem("CheckSchoolAppCode")}`;
      window.open(url);
    },
    //看过的人：点击红心关注
    focus_or_not(item) {
      if (this.user_login_id == 0) {
        this.$message.warning("该功能仅登录后才能使用");
        return;
      } else if (this.user_login_id == item.id) {
        this.$message.warning("不能关注自己");
        return;
      }
      let success = (res) => {
        this.getSawPeople();
        item.is_relation == 0
          ? this.$message.success("关注成功")
          : this.$message.success("已取消关注");
      };
      this.$ajax({
        url: "api/user/bind_relation",
        method: "get",
        params: {
          user_id: this.user_login_id,
          follow_id: item.id,
          type: 0,
        },
        func: { success: success },
      });
    },
    change_page(val, type) {
      if (type == "0") {
        this.page_index = val;
        this.getCommentList();
      } else if (type == "1") {
        this.page_index1 = val;
        this.getVideoFile();
      } else if (type == "2") {
        this.page_index2 = val;
        this.getSawPeople();
      }
    },
    goback() {
      this.$router.push("/home/openclassList");
    },
    //获取打点资源

    getPointMark() {
      let success = (data) => {
        let result = data.data;
        if (result && result.point.length > 0) {
          this.pointData = result.point; //打点的数据
          this.pointData = JSON.parse(
            JSON.stringify(this.pointData)
              .replace(/video_time/g, "time")
              .replace(/comment/g, "text")
          );
          // console.log(this.pointData)
        }
      };

      this.$ajax.get("api/video/video_point_list", {
        params: { videoid: this.videoid },
        func: { success: success },
      });
    },
  },
};
</script>
<style lang="scss">
@import url("../../../assets/css/video.css");

.transcoding {
  position: relative;
  width: 56px;
  cursor: pointer;

  > dl {
    position: absolute;
    bottom: 0;
    width: 100%;

    &:hover dd {
      display: block;
    }

    > dd {
      display: none;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);

      &:hover {
        font-weight: 600;
        background: rgba(0, 0, 0, 0.8);
      }
    }

    > .acitve {
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      // font-weight: 600;
      background: transparent;
    }
  }
}

.live-banner-bgc {
  position: relative;
  background-image: url("../../../assets/images/bgc.png") !important;
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.class-live-banner {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .live-banner-tit {
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;

    i {
      font-weight: 600;
      color: #a0bed2;
      margin-right: 10px;
    }

    strong {
      display: inline-block;
      width: 400px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
    }
  }

  .live-banner-r {
    line-height: 20px;
    font-size: 14px;
    color: #b1bdc2;
  }
}

.video-play-cont {
  margin-bottom: 50px;
}

.soreTipsBox .el-message-box__message {
  text-align: center;
}

.video-box {
  background-color: rgba(43, 51, 63, 0.7);

  .videoMarkPlayer-dimensions.vjs-fluid {
    padding-top: 56%;
  }

  height: 674px;
  position: relative;
}

.live-commont {
  padding-bottom: 50px;
}

.live-commont-l {
  width: 900px;

  .el-tabs__header {
    margin: 10px 0 10px;
  }

  .el-tabs__nav-wrap::after,
  .el-tabs__active-bar {
    background-color: transparent;
  }

  .el-tabs__content {
    background-color: #fff;
    padding: 30px 40px 50px;
    min-height: 525px;

    .i_reviewArea_i {
      margin-bottom: 40px;

      span {
        display: block;
        float: left;
        text-align: center;
        margin-right: 80px;

        em {
          color: #666666;
          line-height: 16px;
          margin-top: 10px;
          display: block;
        }
      }

      .video01 {
        background-position: -757px -650px;
        width: 40px;
        height: 40px;
      }
    }
  }

  .review-list {
    line-height: 18px;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      display: inline-block;
      width: 90px;
      font-size: 14px;
      color: #666666;
      margin-right: 10px;
      float: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    > div {
      width: calc(100% - 90px);
    }

    .user_info,
    .user_profile,
    .teacher_video {
      a {
        color: #348efc;
        margin-right: 20px;
      }
    }

    .user_profile p,
    .video_profile span,
    .video_notice span {
      word-wrap: break-word;
      word-break: break-word;
    }

    .i_teacherHs {
      span {
        display: block;
      }

      span:nth-of-type(1) {
        font-size: 16px;
        line-height: 25px;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .discuss-area {
    .stration,
    .el-rate {
      vertical-align: middle;
      font-size: 14px;
    }

    .el-rate {
      display: inline-block;
      width: 80%;
    }

    .el-textarea__inner {
      font-size: 12px;
    }

    .textarea {
      margin: 20px 0;
      position: relative;

      .numberWord {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    }
  }

  .commont-list-top {
    border-bottom: 1px solid #e0e0e0;

    span {
      font-size: 14px;
      margin-right: 20px;
    }

    .el-button {
      color: #000;
    }

    .sortGery {
      color: #338efc;
    }
  }

  .comment-ls {
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;

    .reviewer_img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      display: block;
    }

    .reviewer-info {
      margin-left: 80px;
    }

    .i_videoReview_ip {
      line-height: 42px;
      color: #666666;
    }

    .reviewer {
      a {
        margin-right: 20px;
        color: #666666;
        vertical-align: middle;
      }

      .el-rate {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .create-time i,
    .create-time span {
      vertical-align: middle;
      margin-left: 20px;
    }

    .create-time i {
      cursor: pointer;
      visibility: hidden;
    }

    .review-text p {
      font-size: 14px;
      line-height: 18px;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

  .pageBox {
    padding-top: 8px;
  }

  .comment-ls:hover .create-time > i {
    visibility: visible;
  }
}

.live-commont-r {
  width: 280px;
}

.i_dataDownload_t {
  line-height: 60px;
  height: 60px;
  font-size: 14px;
}

.i_dataDownload_c,
.look-people {
  background: #ffffff;
  padding: 12px 0 20px;
  position: relative;

  .el-pagination {
    padding: 2px 20px;
  }

  #video_file {
    padding: 5px;
  }
}

.i_dataDownload_c {
  min-height: 186px;
}

.look-people {
  min-height: 294px;
}

.saw-btn {
  margin: 0 4px 20px 0;
  padding: 0;

  .r-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    overflow: hidden;
  }
}

.saw-btn:nth-of-type(5n) {
  margin: 0 0 20px 0;
}

.i_userIn {
  .i_userIn_txt {
    padding: 25px 15px 30px;

    .avatar-pic {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #ccc;
      overflow: hidden;
    }
  }

  .but_Collection02 {
    background-position: -757px -300px;
    width: 40px;
    height: 40px;
  }

  .saw-people-info {
    float: left;
    margin-left: 15px;

    span:nth-of-type(1) {
      display: block;
      font-size: 14px;
      line-height: 24px;
      color: #000000;
    }

    span:nth-of-type(2) {
      display: block;
      font-size: 12px;
      line-height: 24px;
      color: #666666;
    }
  }
}

.i_userIn_icon {
  text-align: center;
  background: #338efc;
  padding: 6px 0;

  i {
    margin: 0 15px;
    cursor: pointer;
  }

  .IsRelation {
    background-position: -757px -300px;
  }

  .NotRelation {
    background-position: -757px -350px;
  }
}

.dataFile {
  padding: 5px 20px;
}

.dataFile {
  span {
    float: left;
    display: block;
    font-size: 14px;
    line-height: 40px;
    width: 72%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  i {
    float: right;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }

  i:hover {
    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
  }
}

.dataFile:hover {
  background: #effaff;
}

.dataFile:hover > span {
  color: #67aed2;
}

.dataFileBG {
  text-align: center;
  padding: 60px 0;

  span {
    font-size: 12px;
    line-height: 65px;
    color: #2f6d8c;
  }
}

.dataUser {
  padding: 10px 25px;
}

.dataUser > a,
.dataUser > div {
  float: left;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 7px 20px 0;
  background: #5cbeb3;
  position: relative;
}

.dataUser > a > img,
.dataUser > div > img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  vertical-align: top;
  overflow: hidden;
}

.dataUser > a:hover,
.dataUser > div:hover {
  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
}

.dataUser > a:hover .i_userIn,
.dataUser > div:hover .i_userIn {
  opacity: 1;
  visibility: visible;
}

.dataUser > a:nth-of-type(5n),
.dataUser > div:nth-of-type(5n) {
  margin: 0 0 20px 0;
}

.dataFileBG2 {
  padding-top: 50px;
  text-align: center;

  p {
    margin: 20px 0;
    color: #2f6d8c;
  }
}

// live-commont end

.collect_btn {
  display: inline-block;
  width: 16px;
  height: 14px;
  background-image: url(../../../assets/images/ipng.png);
  background-repeat: no-repeat;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
}

.alr_collect {
  background-position: -470px -782px;
}

.un_collect {
  background-position: -418px -782px;
}

.f-line {
  margin: 0 20px;
}

.soreTipsBox {
  .el-message-box__header {
    background-color: #338efc;
  }

  .el-message-box__title {
    font-size: 16px;
    color: #fff;
  }

  .el-message-box__close {
    color: #000;
    font-weight: 600;
    font-size: 18px;
  }

  .el-message-box__close:hover {
    color: #fff;
  }

  .el-message-box__message {
    p {
      margin: 10px 0;
    }
  }
}
</style>